<!DOCTYPE html>
<html>

<head>
  <title>Cloud Diablo</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="/static/css/main.css" rel="stylesheet" />
</head>

<body>
  <div id="game-body">
    <!--<video src="locahost:8080/test.sdp">-->
    <div id="game">
      <video id="game-screen" oncontextmenu="return false;" muted playinfullscreen="false" playsinline
        onloadstart="this.volume=0.5" autoplay></video>
      <div id="game-meta">
        <label id="intro">Collaborative play Diablo. Communicate with other and try to defeat Diablo.</label></br>
        <label id="numplayers">Number of players:</label></br>
        <button id="fullscreen" type="submit">Toggle chat</button>
        <p>Powered by Cloud Morph. <a
            href="https://github.com/giongto35/cloud-morph">github.com/giongto35/cloud-morph</a> </p>
        <p>Built by <a href=https://www.linkedin.com/in/huuthanhnguyen />giongto35</a></p>
      </div>
    </div>
    <div id="chat">
      <pre id="chatoutput" class="messages"></pre>
      <div id="chatprofile">
        <label id="usernamelabel">UserName</label>
        <input id="chatusername" type="text" placeholder="Enter User Name to join" />
      </div>
      <div id="chatinput">
        <label id="messagelabel">Message</label>
        <textarea id="chatmessage" placeholder="Start typing the message" rows="3"></textarea>
      </div>
      <button id="chatsubmit" type="submit">Send</button>
    </div>

    <script src="/static/js/game.js"></script>
  </div>
</body>

</html>
